<!--
 * @Author: your name
 * @Date: 2021-03-08 22:35:53
 * @LastEditTime: 2021-03-28 18:03:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \数据结构\1、栈\index.html
-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据结构之-栈</title>

    <link rel="stylesheet" href="../0、libs/base.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/common.js"></script>
    <script type="text/javascript">
        let obj = new Stack()
        let item = {
            name: "小明",
            age: 23,
            school: "靖远三中"
        }
        obj.stack.push(item)
        window.onload = function () {
            const { stack} = obj
            const root = document.querySelector("#root")

            for (let i = 0; i < stack.length; i++) {
                const element = document.createElement("div");
                element.classList.add("item")
                const name = document.createElement("span");
                name.innerText = stack[i].name
                element.appendChild(name)
                const age = document.createElement("span");
                age.innerText = stack[i].age
                element.appendChild(age)
                const school = document.createElement("span");
                school.innerText = stack[i].school
                element.appendChild(school)
                root.appendChild(element)
            }
        }

        /**
         * 栈顶添加
         */
        function add() {
            let item = {
                name: "小花",
                age: 25,
                school: "靖远二中"
            }
            obj.stack.push(item)
             const element = document.createElement("div");
             element.classList.add("item")
             const name = document.createElement("span");
             name.innerText = "小花"
             element.appendChild(name)
             const age = document.createElement("span");
             age.innerText = 26
             element.appendChild(age)
             const school = document.createElement("span");
             school.innerText = "靖远二中"
             element.appendChild(school)
             root.appendChild(element)
        }
        // 栈顶删除
        function removePop() {
            const item = obj.stack.pop()
            console.log(item)
        }

        /**
         * 获取栈的长度
         */
        function getStackCount() {
            console.log("获取栈的长度",obj.getCount())
        }
    </script>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="btn" onclick="add()">栈顶添加</div>
            <div class="btn" onclick="removePop()">栈顶删除</div>
            <div class="btn" onclick="getStackCount()">栈的长度</div>
        </div>

        <div class="content" id="root">

        </div>
    </div>
</body>

</html>